import { useNavigate } from 'react-router-dom'
import { ArrowLeft } from '@react-vant/icons'
import { BasicDemo } from '../../components/BasicDemo'
import { useEffect, useState } from 'react'
import { Button, Toast } from 'antd-mobile'
import { RadioComponent } from '../../components/RadioComponent'
import C1 from '../../assets/c1.png'
import C2 from '../../assets/c2.png'
import huojian from '../../assets/huojian.png'
import bi from '../../assets/bi.png'
import paintPalette from '../../assets/paint-palette.png'
export default function index() {
  const navigate = useNavigate()
  const [grade, setGrade] = useState('幼儿园')//年级
  const [algorithm, setAlgorithm] = useState('加法')//算法
  const [correct_answer, setCorrect_answer] = useState(null as number | null)//整个问题，包括答案  
  const [question, setQuestion] = useState('')//问题
  const [options, setOptions] = useState<string[]>([])//选项
  const [imge, setImge] = useState('')//图片
  const [isSelect, setIsSelect] = useState('')//选中的答案
  const [isSubmit, setIsSubmit] = useState(false)//是否出题
  const workflowUrl = 'https://api.coze.cn/v1/workflow/run'//工作流地址
  const workflow_id = '7542059151217639434'//工作流id
  const patToken = import.meta.env.VITE_PAT_TOKEN
  useEffect(() => {
    console.log(`'图片地址'${imge}`)
  }, [imge])
  function updateAnswer(str: string) {
    switch (str) {
      case 'A':
        setCorrect_answer(0)
        break;
      case 'B':
        setCorrect_answer(1)
        break;
      case 'C':
        setCorrect_answer(2)
        break;
      case 'D':
        setCorrect_answer(3)
        break;
      default:
        break;
    }
  }
  const generate = async () => {
    const res = await fetch(workflowUrl, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${patToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        workflow_id: workflow_id,
        parameters: {
          grade,
          algorithm
        }
      })
    })
    const ret = await res.json()
    if (ret.data) {
      const data = JSON.parse(ret.data)
      console.log(data);
      data.title ? updateAnswer(JSON.parse(data.title).correct_answer) : setCorrect_answer(null)
      setQuestion(data.question)
      data.options ? setOptions(JSON.parse(data.options)) : setOptions([])
      setImge(data.imge)
    }
  }
  function handleOptionSelect(value: string | null) {
    if (value) {
      setIsSelect(value)
    }
    console.log('选中的值', value);
  }
  return (
    <div className="flex flex-col items-center justify-center w-dvw h-dvh ">
      {/* header */}
      <div className='relative flex flex-row items-center justify-between h-8 w-full p-2 bg-[#40D69D]'>
        <div className='absolute w-6 overflow-hidden right-2 top-1'>
          <img src={paintPalette} alt="" />
        </div>
        <div className='bg-cyan-50 w-4 h-4 flex items-center justify-center rounded-md '>
          <div className='text-[#40D69D] text-xs'
            onClick={() => {
              navigate('/home')
            }}
          >
            <ArrowLeft />
          </div>
        </div>
        <div className='text-xs text-neutral-100 mr-10 font-bold'>
          算术训练营
        </div>
      </div>
      {/* body */}
      <div className=' relative flex-1 flex flex-col items-center justify-between bg-cyan-50 w-full'>
        <div className=' absolute top-0 left-0 w-7 overflow-hidden '>
          <img src={C1} alt="" />
        </div>
        <div className=' absolute top-0 right-0 w-7 overflow-hidden '>
          <img src={C2} alt="" />
        </div>
        {/* 选择年级和算法 */}
        <div className='w-full h-13  flex flex-col items-center justify-between p-2 bg-[#FEFFD4]'
        >
          <div>
            <BasicDemo setGrade={setGrade} setAlgorithm={setAlgorithm} />
          </div>
          <div className='w-full flex justify-between items-center mt-1 '>
            <div className='text-[15px] text-gray-700 font-bold rounded-md w-[78%] text-center'>
              当前选择的年级：<span className="text-yellow-500 font-bold">{grade}</span>，算法：<span className="text-yellow-500 font-bold">{algorithm}</span>
            </div>
            <div>
              <Button
                style={{ '--border-radius': '1rem', '--background-color': '#3677C9', '--border-color': '#3677C9' }} color='primary' fill='solid' size='middle'
                onClick={() => {
                  generate()
                  setIsSubmit(true)
                  setIsSelect('')
                }}
              >
                出题
              </Button>
            </div>
          </div>

        </div>
        {/* 题目和选项*/}
        <div className=' w-full flex-1 felx flex-col justify-between items-center'>
          {/* 问题 */}
          <div className='w-full  flex items-center justify-center h-8 px-2 py-1'>
            {
              question ? (
                <div className='text-[18px]'>
                  {question}
                </div>
              ) : (
                <div className='w-full h-full text-[15px] flex items-center justify-center '>
                  请先点击出题按钮后才有题目
                </div>
              )
            }
          </div>
          {/* 图片 */}
          <div className='w-full h-20 overflow-hidden'>
            {
              imge ? <img src={imge} alt="" /> : (
                isSubmit ? <div className='w-full h-full text-[18px] flex items-center justify-center bg-blue-200'>
                  参考图片正在赶来的路上
                </div> : <div className='w-full h-full text-[18px] flex items-center justify-center bg-blue-200'>
                  请先点击出题按钮后才有图片
                </div>
              )
            }
          </div>
          {/* 选项 */}
          <div className='relative w-full flex flex-col  items-center justify-between py-2'>
            <div className='absolute top-0 left-2 w-7 overflow-hidden '>
              <img src={huojian} alt="" />
            </div>
            <div className='absolute top-0 right-2 w-7 overflow-hidden '>
              <img src={bi} alt="" />
            </div>
            <div className='text-[18px] font-bold  rounded-sm w-[60%] flex justify-center items-center'>
              请选择正确的选项
            </div>
            <div className=' flex justify-between w-full items-center px-2 mt-3'>
              {
                options.length > 0 ? (
                  <RadioComponent options={options} onSelect={handleOptionSelect} defaultValue={null} />
                ) : (
                  <div className='w-full h-4 text-[15px] flex items-center justify-center bg-blue-200'>
                    请先点击出题按钮后才有选项
                  </div>
                )
              }
            </div>
          </div>
          <div className='flex justify-center items-center mt-2 w-full'>
            <div className=' w-[60%] h-5 overflow-hidden text-center'>
              <Button onClick={() => {
                if (isSelect) {
                  const index=options.indexOf(isSelect)
                  if(index===correct_answer){
                    Toast.show('恭喜你，回答正确')
                  }else{
                    Toast.show('很遗憾，回答错误')
                  }
                }
                console.log('点击了提交');
              }} style={{ '--background-color': '#3677C9', '--border-color': '#3677C9' }} color='warning' shape='default'>选好了请点击</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
